<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品详情</title>
    <link rel="stylesheet" href="iconfont.css" />
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/spxq.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box1 {
        height: 30px;
        background-color: rgb(49, 47, 47);
        color: white;
        line-height: 30px;
        padding-left: 150px;
      }
      #box2 {
        width: 300px;
        height: 500px;
        float: left;
        margin: 80px 0 0 150px;
        text-align: center;
        border: 1px solid black;
        position: relative;
      }
      #box3 {
        width: 650px;
        height: 500px;

        float: left;
        margin: 80px 0 0 100px;
        padding: 20px 20px 20px 20px;
      }
      #box4 {
        width: 90px;
        height: 90px;
        border-radius: 80px;

        position: absolute;
        right: 50px;
        bottom: 70px;
      }
      .iconfont {
        display: inline-block;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 70px;
        color: white;
      }
      img {
        width: 300px;
        height: 370px;
        /* border: 1px solid black; */
      }
      #xx {
        width: 300px;
        height: 100px;
        border: 1px solid #5e5e5e;
        position: absolute;
        bottom: 72px;
        left: 150px;
      }
      #xx1 {
        width: 100px;
        height: 95px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 2px;
        border: 1px solid red;
      }
      #xx2 {
        width: 100px;
        height: 95px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 2px;
      }
      #img1 {
        width: 100px;
        height: 95px;
        border: none;
      }

      #img2 {
        width: 100px;
        height: 95px;
        border: none;
      }

      #kz {
        position: absolute;
        top: -368px;
        left: 0px;
        display: none;
      }

      #aa {
        text-decoration: none;
        color: black;

        font-size: 23px;
      }
      #jk {
        color: rgb(236, 50, 50);
        margin-top: 20px;
        margin-bottom: 20px;
      }
      #djs {
        width: 650px;
        height: 60px;
        color: white;
        padding-left: 20px;
        font-weight: 800;
        line-height: 60px;
        background-color: peachpuff;
      }
      #ab {
        text-decoration: none;
        color: rgb(204, 7, 7);
        padding-left: 20px;
        line-height: 60px;
        width: 650px;
        height: 60px;
        background-color: #e8e8e8;
        font-size: 30px;
        display: inline-block;
      }
      #jian {
        display: inline-block;
        /* margin-top: 80px; */
        width: 38px;
        height: 43px;
        font-size: 30px;
        text-align: center;
        /* margin-left: 100px; */
        line-height: 30px;
      }
      #jia {
        display: inline-block;
        /* margin-top: 90px; */
        width: 38px;
        height: 43px;
        font-size: 30px;
        text-align: center;
        line-height: 30px;
      }
      #sl {
        height: 100px;
        text-align: center;
        line-height: 100px;
        padding: 20px;
      }
      #txt {
        width: 150px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 20px;
      }
      #btn {
        background-color: rgb(231, 65, 14);
        color: white;
        border: none;
        width: 200px;
        height: 60px;
        margin-top: 50px;
        margin-left: 100px;
        border-radius: 5px;
        font-size: 30px;
      }
      #mcx {
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: rgba(0, 255, 255, 0.247);
        left: 150px;
        top: 180px;
        display: none;
      }
      #mcd {
        width: 400px;
        height: 500px;
        background-color: aquamarine;
        position: absolute;
        left: 500px;
        top: 120px;
        overflow: hidden;
        border: 1px solid black;

        display: none;
      }
      #mcimg {
        border: none;
        width: 800px;
        height: 800px;
        position: absolute;
        top: 0;
        left: 0;
      }
      #bt {
        background-color: rgb(124, 122, 122);
        height: 100px;
        line-height: 80px;
        color: white;
        text-indent: 2em;
      }
      #logo {
        width: 220px;
        height: 120px;
        vertical-align: middle;
      }
      #wz {
        font-size: 25px;
      }
      #aaa {
        margin-left: 170px;
        color: white;
        font-size: 14px;
      }
      #s {
        display: inline-block;
        background-color: white;
        width: 30px;
        height: 30px;
        color: black;
        border-radius: 30px;
        line-height: 30px;
        margin-top: 15px;
        text-align: center;
      }
      #f {
        display: inline-block;
        background-color: white;
        width: 30px;
        height: 30px;
        color: black;
        border-radius: 30px;
        margin-left: 20px;
        margin-top: 15px;
        line-height: 30px;
        text-align: center;
      }
      #m {
        display: inline-block;
        background-color: white;
        width: 30px;
        height: 30px;
        color: black;
        border-radius: 30px;
        margin-left: 20px;
        margin-top: 15px;
        line-height: 30px;
        text-align: center;
      }
      #mh {
        width: 20px;
        height: 50px;
        line-height: 30px;
        display: inline-block;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="bt">
      <a href="index.html"><img id="logo" src="img/cat-logo.png" /></a>
      <span id="wz">商品详情</span>
    </div>
    <div id="box2"></div>
    <div id="box3"></div>
    <a href="gwc.html" target="_black" id="box4"
      ><span class="iconfont icon-gouwuchexuanzhong"></span
    ></a>
    <div id="xx">
      <span id="xx1">
        <img id="img1" src="img/sp2.jpg" />
      </span>
      <span id="xx2">
        <img id="img2" src="img/xx1.jpg" />
      </span>
      <img src="img/xx1.jpg" id="kz" />
    </div>
    <div id="mcx"></div>
    <script>
      // var obox1 = document.getElementById("box2");
      // var obox2 = document.getElementById("mcx");
      // var obox3 = document.getElementById("mcd");
      // console.log(obox3);
      // obox1.onmouseover = function () {
      //   obox2.style.display = "block";
      //   obox3.style.display = "block";
      // };
      // obox1.onmousemove = function (e) {
      //   var evt = e || window.event;
      //   var wbox3 = evt.pageX - obox1.offsetLeft - obox3.offsetWidth / 2;
      //   var hbox3 = evt.pageY - obox1.offsetTop - obox3.offsetHeight / 2;
      //   var bbox1 = obox1.offsetWidth - obox3.offsetWidth;
      //   if (wbox3 <= 0) {
      //     wbox3 = 0;
      //   } else if (wbox3 > bbox1) {
      //     wbox3 = bbox1;
      //   }
      //   if (hbox3 <= 0) {
      //     hbox3 = 0;
      //   } else if (hbox3 > bbox1) {
      //     hbox3 = bbox1;
      //   }
      //   obox3.style.left = wbox3 + "px";
      //   obox3.style.top = hbox3 + "px";
      //   var wbox2 = (wbox3 * (obox2.offsetWidth - oimg2.offsetWidth)) / bbox1;
      //   oimg2.style.left = wbox2 + "px";
      //   var hbox2 = (hbox3 * (obox2.offsetHeight - oimg2.offsetHeight)) / bbox1;
      //   oimg2.style.top = hbox2 + "px";
      // };
      // obox1.onmouseout = function () {
      //   obox2.style.display = "none";
      //   obox3.style.display = "none";
      // };
    </script>
  </body>
</html>
